
<script setup>
// 模拟文件列表数据
const fileList = [
  {
    icon: '/static/image/doc@2x.png', // 假设的Word文档图标路径，你需要替换为实际图标
    title: '公文文件.doc',
    updateTime: '2023-10-12 12:09:00'
  },
  {
    icon: '/static/image/ppt@2x.png', // 假设的PPT文档图标路径，你需要替换为实际图标
    title: '公文文件.ppt',
    updateTime: '2023-10-12 12:09:00'
  },
  {
    icon: '/static/image/excle@2x.png', // 假设的Excel文档图标路径，你需要替换为实际图标
    title: '公文文件.excle', // 这里原图片有拼写错误，应为excel，若需修正请修改
    updateTime: '2023-10-12 12:09:00'
  },
  {
    icon: '/static/image/png@2x.png', // 假设的PNG图片图标路径，你需要替换为实际图标
    title: '公文文件.png',
    updateTime: '2023-10-12 12:09:00'
  },
  {
    icon: '/static/image/avi@2x.png', // 假设的AVI视频图标路径，你需要替换为实际图标
    title: '公文文件.avi',
    updateTime: '2023-10-12 12:09:00'
  }
];


</script>


<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <image src="/static/image/3.4.png" class="search-icon"></image>
      <input type="text" placeholder="请输入文件名称关键词查询" class="search-input"></input>
    </view>
    <!-- 文件列表 -->
    <view class="file-list">
      <view class="file-item" v-for="(item, index) in fileList" :key="index">
        <image :src="item.icon" class="file-icon"></image>
        <view class="file-info">
          <text class="file-title">{{ item.title }}</text>
          <br>
          <text class="file-update-time">{{ item.updateTime }} 更新</text>
        </view>
        <button class="download-btn" @click="downloadFile(item.title)">下载</button>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  padding: 15px;
  background-color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 15px;
}

.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background-color: transparent;
}

.file-list {
  /* 可以根据需要设置列表的样式，例如间距等 */
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.file-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.file-info {
  flex: 1;
}

.file-title {
  font-size: 14px;
  color: #333;
}

.file-update-time {
  font-size: 12px;
  color: #999;
}

.download-btn {
  background-color: #007AFF;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  border: none;
}
</style>